<!--
 * @Description: 添加商品规格选项
 * @Date: 2023-04-08 15:16:39
 * @LastEditTime: 2023-04-09 23:34:06
 * @Author: Black
 * @FilePath: \store_admin\src\views\goods\components\SkuCard.vue
-->
<template>
  <el-form-item label="规格选项" v-loading="bodyLoading">
    <el-card shadow="never" class="w-full mb-3" v-for="(item, index) in sku_card_list" :key="item.id"
      v-loading="item.loading">
      <template #header>
        <div class="flex items-center">
          <el-input v-model="item.text" placeholder="规格名称" @change="handleUpdate(item)" style="width: 200px;">
            <template #append>
              <el-icon class="cursor-pointer" @click="handleChooseSku(item)">
                <More />
              </el-icon>
            </template>
          </el-input>
          <el-button class="ml-auto" size="small" @click="sortCard('up', index)" :disabled="index == 0">
            <el-icon>
              <Top />
            </el-icon>
          </el-button>
          <el-button size="small" @click="sortCard('down', index)" :disabled="index === (sku_card_list.length - 1)">
            <el-icon>
              <Bottom />
            </el-icon>
          </el-button>
          <el-popconfirm title="是否要删除该商品？" confirmButtonText="确认" cancelButtonText="取消" @confirm="handleDelete(item)"
            width="200px">
            <template #reference>
              <el-button size="small">
                <el-icon>
                  <Delete />
                </el-icon>
              </el-button>
            </template>
          </el-popconfirm>

        </div>
      </template>
      <SkuCardItem :sku-card-id="item.id"></SkuCardItem>
    </el-card>
    <el-button class="btns" type="primary" :loading="btnLoading" plain @click="addSkuCardEvent">添加规格</el-button>

  </el-form-item>

  <ChooseSku ref="ChooseSkuRef"></ChooseSku>
</template>

<script setup>
import { ref } from 'vue';
import SkuCardItem from './SkuCardItem.vue';
import ChooseSku from '~/components/ChooseSku.vue';
import {
  sku_card_list,
  addSkuCardEvent,
  btnLoading,
  handleUpdate,
  handleDelete,
  sortCard,
  bodyLoading,
  handleChooseSetGoodsSkusCard
} from '~/composables/useSku.js'

const ChooseSkuRef = ref(null)
const handleChooseSku = (item) => {
  // console.log(item)
  ChooseSkuRef.value.open((value) => {
    handleChooseSetGoodsSkusCard(item.id, {
      name: value.name,
      value: value.list
    })
  })
}

</script>

<style scoped>
:deep(.el-card__header) {
  @apply !p-2 bg-gray-50;
}

.btns {
  height: 34px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}
</style>